<!--
  @Descripttion:：功能描述
  @Author：yejianbo
  @Date：2023年03月18日 08:56:03
-->
<template>
  <section :class="['common-btn', {'disabled': disabled}, {'cancel': type === 'cancel' }]" @click="handleClick">
    <slot></slot>
    {{ title }}
  </section>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {
    title: {
      type: String,
    },
    type: {
        type: String
    },
    disabled: {
      type: Boolean,
    },
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    handleClick() {
      this.$emit("handleClick");
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.common-btn {
  position: relative;
  display: inline-block;
  height: 51px;
  line-height: 51px;
  background: #4677b9;
  border-radius: 4px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  padding: 0 55px;
  cursor: pointer;
}
.disabled {
    background: #e3e3e3;
    color: #fff;
}
.cancel {
    color: #FA606A;
    border: 1px solid #FA606A;
    background-color: #fff;
}
</style>
